import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { resolve } from 'path'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'

export default defineConfig(({ mode }) => ({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
      imports: [
        'vue',
        'vue-router',
        'pinia',
        {
          'lodash-es': ['debounce', 'throttle', 'cloneDeep', 'isEmpty']
        }
      ],
      dts: true
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      dts: true
    })
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '~': resolve(__dirname, 'src')
    }
  },
  css: {
    postcss: {
      plugins: [
        tailwindcss,
        autoprefixer
      ]
    }
  },
  server: {
    port: 5173,
    host: true
  },
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
    rollupOptions: {
      // Only treat @wailsio/runtime as external in production builds
      external: mode === 'production' ? ['@wailsio/runtime'] : [],
      output: {
        manualChunks(id) {
          // More granular chunk splitting to avoid circular dependencies
          if (id.includes('node_modules')) {
            if (id.includes('element-plus')) {
              return 'element-plus'
            }
            if (id.includes('vue') && !id.includes('element-plus')) {
              return 'vue-vendor'
            }
            if (id.includes('@visactor/vtable')) {
              return 'vtable'
            }
            if (id.includes('monaco-editor')) {
              return 'monaco'
            }
          }
        }
      }
    }
  }
})) 